<template>
    <div class="login">
        <div class="login-top">
            <van-icon name="arrow-left" @click="previous" />
            <span>注册/登录</span>
        </div>
        <div class="login-input">
            <van-field :error-message="message" left-icon="phone-o" v-model="phone" :required="required" label="手机号"
                placeholder="请输入手机号" />
            <van-field v-if="ctrlCheck" left-icon="guide-o" v-model="sms" center clearable label="短信验证码"
                placeholder="请输入短信验证码">
                <template #button>
                    <van-button size="small" ref="vanButton" plain round type="primary" @click="check">获取验证码
                    </van-button>
                </template>
            </van-field>
            <van-field v-model="password" left-icon="aim" label="密码" placeholder="请输入密码" />
        </div>
        <div class="retreat">
            <span @click="newPeople">没有账号？点此注册</span>
            <span>忘记密码</span>
        </div>
        <div class="btn">
            <van-button type="primary"
                :style="{ width: '300px', 'margin-top': '120px', 'margin-left': '50%', transform: 'translateX(-50%)' }"
                @click="telJudge">登录
            </van-button>
        </div>
    </div>
</template>

<script>
import { getVeri, getSignIn, register } from '../request/api/login.js'
import { mapMutations } from 'vuex';
export default {
    data() {
        return {
            phone: '',
            sms: '',
            message: '',
            password: '',
            // 判断手机号是否错误
            required: false,
            // 控制验证码显隐
            ctrlCheck: false
        }
    },
    methods: {
        ...mapMutations(['changeIsshow', 'checkUid']),
        // 登录&注册
        async telJudge() {
            if (this.phone.length !== 11) {
                this.message = '手机号错误';
                this.required = true;
            }
            if (this.ctrlCheck == false) {
                let ror = await getSignIn(this.phone, this.password);
                this.checkUid(ror.data.uid);
                localStorage.setItem('token', ror.data.token)
                if (ror.data.msg == '登录成功') {
                    this.$router.push('/user');
                    this.$toast.success('登录成功');
                } else {
                    this.$toast.fail('手机号或密码错误');
                }
            }
            if (this.ctrlCheck) {
                let res = await register(this.phone, this.password, this.sms);
                if (res.data.msg == '注册成功') {
                    this.$router.push('/user');
                }
            }
        },
        previous() {
            if (localStorage.getItem('token')) {
                this.$router.go(-1);
            }
        },
        async check() {
            await getVeri({
                mobile: this.phone,
                type: 'register'
            });
        },
        newPeople() {
            this.ctrlCheck = true;
        }
    }
}
</script>

<style lang="less" scoped>
.login {
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    .login-top {
        width: 100%;
        height: 50px;
        background: rgb(7, 193, 96);
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;

        span {
            margin-right: 50%;
            transform: translateX(50%);
        }
    }

    .btn {
        width: 100%;
        margin-top: 30px;
    }

    .retreat {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        span {
            font-size: 14px;
            color: blue;
            margin: 0 15px;
        }
    }
}
</style>